<template>
  <div>
    <van-sticky :offset-top="0">
      <van-nav-bar
        :title="className"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <!-- 推荐商家 -->
    <div class="recommended-merchants">
      <!-- <h2>推荐商家</h2> -->
      <van-card
        v-for="merchant in merchants"
        :key="merchant.name"
        :thumb="merchant.avatar"
        @click="onMerchantClick(merchant)"
      >
        <!-- 添加起送费和配送费等自定义内容-->

        <template #tags>
          <div class="title-merchants">
            <h3 style="margin-top: 5px; margin-bottom: 8px">
              {{ merchant.storeName }}
            </h3>
          </div>
          <div class="description-class">
            <span class="between-innerSpan">
              <span
                ><van-tag plain type="primary"
                  >{{ merchant.score }}分
                </van-tag></span
              >
              <span>
                <van-tag plain type="primary"
                  >月售{{ merchant.monthSale }}+</van-tag
                ></span
              >
            </span>
            <span class="between-innerSpan">
              <span
                ><van-tag plain type="primary"
                  >{{ estimateDeliveryTime }}分钟
                </van-tag></span
              >
              <span>
                <van-tag plain type="primary"
                  >{{ deliveryDistance }}km</van-tag
                ></span
              >
            </span>
          </div>
          <div class="merchant-info">
            <van-tag plain type="primary"
              >起送费: ¥{{ merchant.minimumDeliveryTime }}
            </van-tag>
            <van-tag plain type="primary"
              >配送费: ¥{{ merchant.deliveryFee }}</van-tag
            >
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import http from "../../utils/http"; //对axios请求进行封装
import { useRouter, useRoute } from "vue-router";
//变量区:
// 1.进行路由跳转的实例
const router = useRouter();
//2.接收路由参数的实例
const route = useRoute();
//3.接收分类的id
const classId = route.query.classId;
//4.接收分类的name
const className = route.query.className;
//5.存放商家的数组
const merchants = ref();
//6.预计需要的配送时间
const estimateDeliveryTime = ref(0);
//7.配送距离
const deliveryDistance = ref(0);
//方法区域
//1.点击返回按钮
const onClickLeft = () => {
  router.back();
};
//2.根据分类classId查询该分类下的所有的商家
const queryAllClassBusinesses = async () => {
  try {
    const respond = await http.get("/business/getBusinessesByClassId", {
      params: {
        classId: classId,
      },
    });
    console.log("获取了分类商家的数据", respond.data.data);
    merchants.value = respond.data.data;
  } catch {
    console.error("请求发现生错误");
  }
};
//3.钩子函数:页面挂的时候先被调用
onMounted(() => {
  queryAllClassBusinesses();
});
//4.点击商家后进行页面跳转
const onMerchantClick = (merchant) => {
  console.log("传递的分类商家id为", merchant.businessId);
  router.push({
    path: "/business",
    query: { merchantId: merchant.businessId },
  });
};
</script>
<style scoped>
::v-deep(.van-nav-bar) {
  background-color: white;
}
/* 商家列表的样式 */
.recommended-merchants {
  margin: 16px;
}
.title-merchants {
  margin: 2px;
}
.description-class {
  display: flex;
  justify-content: space-between; /* 将两个span元素分别放置在div的两端 */
  align-items: center; /* 垂直居中对齐 */
  margin-top: 5px;
}
.between-innerSpan span {
  display: inline-block; /* 使span表现为块级元素，这样margin才能生效 */
  margin-right: 8px; /* 设置右边距 */
}
.merchant-info {
  display: flex;
  /* justify-content: space-between; */
  font-size: 12px;
  color: #888;
  margin-top: 6px; /* 添加一些顶部间距 */
  gap: 8px; /* 这里的 8px 是两个标签之间的间隙大小，可以根据需要调整 */
}
</style>